/**
 * 一、JSX的规则要求
 * 1、JSX中只能有一个根标签
 * 2、React中使用如下两种方式，来保证既可以有一个根标签，而且这个根标签不会产生实际的DOM
 *  1) React.Fragment组件来完成
 *  2) 使用空标签来完成
 * 3、要注意使用驼峰式命名法
 *  class----->className
 * 4、会将短横线命名法变成驼峰式命名法才可以
 *  注意：如果出现短横线样式出现在React的组件中不允许，解决方案有三种
 *  1）将短横线变成驼峰式命名法（推荐）
 *  2) 使用""或者''的方式来解决 (不推荐)
 *  3）使用[]的方式来对象中的属性括起来，这种方式可以属性是一个变量的形式（扩展）
 * 6、所有jsx建议小括号直接括起来(推荐使用)
 * 二、JSX实现条件渲染
 * 三、JSX实现列表渲染
 * 四、JSX的样式的处理
 * 五、JSX的图片的引入
 * 六、引入外部的sass的步骤
 * 第1种引入方式
 * 1）import '@/assets/style/App.scss'
 * 2) 使用className的方式来进行引入
 * 第2种引入方式
 * 1）在指定位置创建一个名为xx.module.css
 * 2) 通过ES6的import引入方式:import xx from css的路径
 * 3) className={xx.类样式的名称}
 * 七、JSX中的注释
 */
import appStyle from '@/assets/style/App.module.css'
export default function App(){
    let x='background-color'
    const boxStyle={
        width:'100px',
        height:'100px',
        [x]:'orange'
    }
    return (<>
       <div className={appStyle.box}>Giles</div> 
       {/* 
          如下style中的{}语法中的{width:'100px',height:'100px',backgroundColor:'skyblue'}
          是一个匿名的字面的对象，这种对象不具有复用性，但是具有间接性
          行内样式，少量要有
       */}
       <div style={{width:'100px',height:'100px',backgroundColor:'skyblue'}}></div>
    </>)
}